<template>
  <div>
    <div ref="editor" style="text-align: left"></div>
    <!-- <button v-on:click="getContent">查看内容</button> -->
  </div>
</template>

<script>
  import E from 'wangeditor'
  /*const {
    wlsqGovPutFile,
    wlsqFileDownload
  } = until;*/

  export default {
    name: "wang",
    data() {
      return {
        editorContent: "",
      };
    },
    // props: ["content"],
    props: {
      content: {
        type: String,
        default: 'default'
      },
    },

    methods: {
      // getContent: function () {
      //   alert(this.editorContent);
      // },
    },
    mounted() {
      var editor = new E(this.$refs.editor);

      editor.config.menus = [
        "bold",
        "italic",
        "underline",
        "strikeThrough",
        "fontName",
        "fontSize",
        "foreColor",
        "list",
        "justify",
        "link",
        "video",
        "table",
        "image",
      ];
      editor.config.zIndex = 2000;

      // 开启配置
      editor.config.debug = true;
      // 隐藏“网络图片”tab
      editor.config.showLinkImg = false;
      // 关闭粘贴内容中的样式
      editor.config.pasteFilterStyle = false;
      // 忽略粘贴内容中的图片
      editor.config.pasteIgnoreImg = false;
      // 将图片大小限制为 3M
      editor.config.uploadImgMaxSize = 5 * 1024 * 1024;
      // 限制一次最多上传 1 张图片
      editor.config.uploadImgMaxLength = 10;
      editor.config.useAutoInsertImgHooks = true
      editor.config.useAutoInsertVideoHooks = true
      editor.config.uploadImgServer = 'http://119.23.232.220:8222/vod/eduoss/file/upload2'
      editor.config.uploadFileName = 'file' // formdata中的name属性
      editor.config.uploadImgHooks = {
        // 图片上传并返回结果，但图片插入错误时触发
        fail: function (xhr, editor, result) {
          console.log(result)
        },
        success: function (xhr, editor, result) {
          // 图片上传并返回结果，图片插入成功之后触发
          console.log(result, 'success')
        }
      }

      editor.config.onchange = (html) => {
        this.$parent.textarea2contentlength = html || "";
        if (editor.txt.text().length > 10) {
          // .insert("www.baidu.com/img/flexible/logo/pc/result.png")
        }
        if (editor.txt.text().length > 65535) {
          editor.txt.text(
            editor.txt.text().slice(0, editor.txt.text().length - 1)
          );
          html.slice(0, html.length - 1);
          this.$message({
            message: "输入已达上限",
            duration: 2000,
            type: "warning",
          });
          return;
        }
        this.editorContent = html;
      };

      editor.create();
      setTimeout(() => {
        this.content !== "" ? editor.txt.html(this.content) : "";
      }, 500);
    },
  };

</script>

<style lang="scss" scoped>
  /deep/.w-e-text-container {
    height: 100% !important;
  .w-e-text {
    resize: vertical !important;
    min-height: 200px;
  }
  }
</style>
